import React from 'react';
import { FlatList,Pressable, View, Text, StyleSheet, StatusBar } from 'react-native';

const styles = StyleSheet.create({
    // 临时存放的MyList组件样式
    container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
    },
    item: {
        backgroundColor: '#f9c2ff',
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
    },
    title: {
        fontSize: 32,
    },
})
const renderItemForList = ({ item }) => (
    <Pressable>
        <View style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
        </View>
    </Pressable>
);
let lastLength = 0;
export default class MyList extends React.Component {
    // shouldComponentUpdate () {
    //     if (lastLength !== this.props.data.length)
    //     return true;
    //     else return false;
    // }
    render() {
        lastLength = this.props.data.length;
        return (
            <FlatList
                onEndReachedThreshold={0.1}
                data={this.props.data}
                renderItem={renderItemForList}
                keyExtractor={(item, i) => item.id + i}
                onEndReached={() => this.props.changePage()}
            >
            </FlatList>
        )
    }
}

// export default function MyList (props){

//     return (
//         <FlatList data={props.data}
//         renderItem={renderItemForList}
//         keyExtractor={(item, i) => item.id + i}
//         onEndReached={() => props.changePage()}
//     >
//         </FlatList>
//     )

// }





